<template>
  <div>
    <div :id=id style="height: 400px;width: 500px;"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { computed, onMounted } from 'vue';

const props = defineProps({
  data: Object
})
const dataX = props.data.dataX;
const dataY = props.data.dataY;
const sum = props.data.sum;
const id = props.data.id

onMounted(() => {
  getTheBar()
})
const getTheBar = () => {
  let chartDom = document.getElementById(id);
  let myChart = echarts.init(chartDom);
  let option;



  option = {
    tooltip: {
      show: true,
      trigger: 'axis',
      position: ['30%', 20],
      alwaysShowContent: true,
      className: 'theBarTheTooltip',

      formatter: (params, ticket, callback) => {
        const name = params[0].name
        const data = params[0].data.value
        let percent = computed(() => {
          return (data * 100 / sum).toFixed(0)
        })
        let color = computed(() => {
          if (name == dataX[0]) {
            return 'rgba(254,64,128,1)'
          } else if (name == dataX[1]) {
            return 'rgba(254,109,64,1)'
          } else if (name == dataX[2]) {
            return 'rgba(249,179,76,1)'
          } else if (name == dataX[3]) {
            return 'rgba(254,254,0,1)'
          } else if (name == dataX[4]) {
            return 'rgba(170, 71, 187,1)'
          } else if (name == dataX[5]) {
            return 'rgba(124, 77, 254,1)'
          } else if (name == dataX[6]) {
            return 'rgba(139, 157, 254,1)'
          } else if (name == dataX[7]) {
            return 'rgba(32, 148, 240,1)'
          } else if (name == dataX[8]) {
            return 'rgba(29, 231, 181,1)'
          }
        })
        let content = `<div style="display: flex; gap: 8px;">
                        <div class="theBarCircle">
                          <div class="theBarTheCircle" style="background-color:${color.value}"></div>
                        </div>
                        <div style='font-family: "PingFang-Medium"'>${name}</div>
                      </div>
                      <div style="display: flex;gap: 10px;font-family: 'PingFang-Bold'">
                        <div>${data}</div>
                        <div>${percent.value}%</div>
                      </div>`
        return content
      }
    },
    xAxis: {
      type: 'category',
      data: dataX,
      axisLabel: {
        interval: 0,
        fontSize: 11,
        rotate: -30
      },
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [
          {
            value: dataY[0],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: 'rgba(254,64,128,0.5)' },
                { offset: 1, color: 'rgba(254,64,128,1)' },
              ])
            }
          },
          {
            value: dataY[1],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: 'rgba(254,109,64,0.5)' },
                { offset: 1, color: 'rgba(254,109,64,1)' },
              ])
            }
          },
          {
            value: dataY[2],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: 'rgba(249,179,76,0.5)' },
                { offset: 1, color: 'rgba(249,179,76,1)' },
              ])
            }
          },
          {
            value: dataY[3],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: 'rgba(254,254,0,0.5)' },
                { offset: 1, color: 'rgba(254,254,0,1)' },
              ])
            }
          },
          {
            value: dataY[4],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: 'rgba(170,71,187,0.5)' },
                { offset: 1, color: 'rgba(170, 71, 187,1)' },
              ])
            }
          },
          {
            value: dataY[5],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: 'rgba(124, 77, 254,0.5)' },
                { offset: 1, color: 'rgba(124, 77, 254,1)' },
              ])
            }
          },
          {
            value: dataY[6],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: 'rgba(139, 157, 254,0.5)' },
                { offset: 1, color: 'rgba(139, 157, 254,1)' },
              ])
            }
          },
          {
            value: dataY[7],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: 'rgba(32, 148, 240,0.5)' },
                { offset: 1, color: 'rgba(32, 148, 240,1)' },
              ])
            }
          },
          {
            value: dataY[8],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: 'rgba(29, 231, 181,0.5)' },
                { offset: 1, color: 'rgba(29, 231, 181,1)' },
              ])
            }
          },
        ],
        type: 'bar'
      }
    ]
  };
  option && myChart.setOption(option)
}
</script>
<style>
.theBarTheTooltip {
  width: 201px;
  height: 40px;
  background-image: url('/src/assets/images/theTooltip.png');
  background-color: rgba(0, 0, 0, 0.5) !important;
  color: #DBFAFF !important;
  border: none !important;

  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

.theBarCircle {
  height: 18px;
  width: 18px;
  border: 1px solid rgba(145, 143, 143, 0.5);
  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;

}

.theBarTheCircle {
  height: 7px;
  width: 7px;
  border-radius: 50%;
}
</style>